.home-container {
    //   height: 100%;
    overflow-x: hidden;
    width: 100%;
    position: relative;
    background: #fff;

    .el-menu-demo {
        /* border: 1px solid red; */
        display: flex;
        padding-right: 30px;
        justify-content: flex-end;
    }

    .topImg {
        width: 100%;
        /* height: 89.25px; */
    }

    .search-box {
        padding: 22px 0;

        .search-btn {
            background: #f03726;
            border: 2px solid #f03726;
            color: #fff;
            width: 95px;
        }

        .search-input {
            border: 2px solid #f03726;
        }

        .link-list {
            margin-top: 5px;
            display: flex;

            a {
                color: rgba(0, 0, 0, 0.25);
            }

            a:hover {
                text-decoration: underline;
                color: #fd3f31;
            }

            li:not(:last-child) {
                margin-right: 20px;
            }
        }
    }

    .header-nav {
        height: 38px;
        background: #fd3f31;
        width: 100%;

        .nav-list {
            height: 38px;
            line-height: 38px;
            width: 1200px;
            margin: 0 auto;
            display: flex;
            color: #fff;

            li {
                margin-right: 60px;
            }
        }
    }

    .main-container {
        width: 1200px;
        // border: 1px solid red;
        margin: 0 auto;

        .main-top {
            display: flex;
            // height: 529px;
            justify-content: space-between;

            // border: 1px solid red;
            // width: 30%;
            .main-left {
                border: 1px solid #fd3f31;
                width: 240px;
                position: relative;

                .channel-container {
                    // height: 61px;
                    height: 12.5%;
                    width: 100%;
                    display: flex;
                    padding: 7px 10px;

                    .channel-left {
                        width: 52px;
                        text-align: center;
                        margin-right: 15px;
                        color: #fd3f31;

                        i {
                            font-size: 26px;
                            margin-bottom: 5px;
                        }

                        .category {
                            white-space: nowrap;
                        }
                    }

                    .channel-right {
                        line-height: 26px;
                        width: calc(100% - 67px);
                        display: flex;
                        flex-wrap: wrap;

                        a {
                            width: auto;
                            margin-right: 5px;
                            min-width: 30px;
                            font-size: 12px;
                            color: #bababa;
                        }
                    }
                }

                .active {
                    background: #fd3f31;
                    color: #fff;
                    // box-sizing: border-box;

                    .channel-left,
                    .channel-right a {
                        color: #fff;
                    }
                }

                .channel-right-box {
                    height: 543px;
                    width: 720px;
                    z-index: 5;
                    position: absolute;
                    background: #fff;
                    top: -1px;
                    left: 239px;
                    padding: 25px 34px 14px;
                    font-size: 12px;
                    box-sizing: border-box;
                    border: 2px solid #fd3f31;

                    .right-item-title {
                        font-weight: 700;
                        color: #1c1c1c;
                        line-height: 17px;
                        margin-bottom: 5px;
                    }

                    .right-item-box {
                        display: flex;
                        flex-wrap: wrap;

                        li {
                            line-height: 14px;
                            color: #4a4a4a;
                            margin: 4px 12px 4px 0;
                            padding: 0 12px 0 0;
                            white-space: nowrap;
                            display: inline-block;
                            position: relative;
                            cursor: pointer;

                            &::after {
                                content: "";
                                position: absolute;
                                top: 10%;
                                left: 35px;
                                border-left: 1px solid #bababa;
                                height: 10px;
                                width: 1px;
                            }

                            &:hover {
                                text-decoration: underline;
                            }
                        }
                    }
                }

                .channel-container:not(:last-child) {
                    border-bottom: 1px solid #eee;
                }
            }

            .main-right {
                width: 240px;

                // border: 1px solid red;
                .right-first {
                    border: 1px solid #ddd;
                    border-bottom: none;
                    height: 40px;
                    line-height: 40px;
                    font-size: 14px;
                    text-align: center;
                    color: #fd3f31;
                    width: 100%;
                    display: block;
                }

                .item-box {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    margin-bottom: 10px;
                    border-bottom: 1px solid #ddd;

                    li {
                        height: 60px;
                        text-align: center;
                        border-top: 1px solid #ddd;
                        border-left: 1px solid #ddd;
                        width: 50%;
                        line-height: 60px;
                        cursor: pointer;

                        img {
                            width: 100%;
                            height: 100%;
                            display: block;
                        }
                    }

                    li:nth-of-type(2n) {
                        border-right: 1px solid #ddd;
                    }
                }

                .message-box {
                    padding: 18px 12px;
                    border: 1px solid #ddd;
                    width: 100%;
                    height: calc(100% - 290px);

                    .item {
                        cursor: pointer;

                        .item-type-1 {
                            background-image: linear-gradient(141deg,
                                    #ff7f04 0,
                                    #fc1100 100%);
                        }

                        .item-type-2 {
                            background-image: linear-gradient(134deg,
                                    #c86dd7 0,
                                    #7f23ae 100%);
                        }

                        .item-type-3 {
                            background-image: linear-gradient(119deg, #fe013f 0, #e803a2 100%);
                        }

                        .item-tag {
                            line-height: 16px;
                            margin-right: 8px;
                            color: #fff;
                            padding: 0 2px;
                            vertical-align: middle;
                            font-size: 12px;
                        }

                        .item-info {
                            display: inline-block;
                            line-height: 17px;
                            font-size: 12px;
                            color: #9b9b9b;
                            vertical-align: middle;
                            text-overflow: ellipsis;
                            max-width: 168px;
                            overflow: hidden;
                            white-space: nowrap;

                            &:hover {
                                color: #fd3f31;
                            }
                        }
                    }

                    .item:not(:last-child) {
                        margin-bottom: 14px;
                    }
                }

                // border: 1px solid red;
            }

            .main-mid {
                width: calc(100% - 500px);
                height: 100%;

                .main-mid-left {
                    width: calc(75% - 5px);
                    float: left;
                    margin-right: 10px;
                    height: 100%;

                    // border: 1px solid red;
                    .small-title {
                        border-bottom: 2px solid #fd3f31;
                        font-size: 14px;
                        line-height: 20px;
                        position: relative;

                        span:nth-of-type(1) {
                            color: #fd3f31;
                            cursor: pointer;
                        }

                        span:nth-of-type(2) {
                            color: #9b9b9b;
                            position: absolute;
                            right: 0;
                            font-size: 12px;
                            line-height: 17px;
                        }
                    }

                    .img-box {
                        display: flex;
                        margin-top: 10px;
                        justify-content: space-between;


                        img {
                            // height: 204px;
                            width: 250px;
                            cursor: pointer;
                        }
                    }
                }

                .top-item {
                    margin-bottom: 10px;
                }

                .main-mid-right {
                    width: calc(25% - 5px);
                    float: left;
                    height: 100%;

                    // border: 1px solid red;
                    img {
                        width: 100%;
                        height: 280px;
                        cursor: pointer;
                    }

                    img:nth-of-type(2) {
                        height: calc(100% - 290px);
                    }
                }
            }
        }

        .main-bottom {
            margin-top: 25px;
            width: 100%;

            .bottom-title {
                line-height: 25px;
                font-size: 18px;
                color: #fd3f31;
                margin-bottom: 7px;
            }

            .main-bottom-container {
                display: flex;
                flex-wrap: wrap;
                margin-bottom: 10px;
                border-top: 1px solid #eee;
                border-left: 1px solid #eee;

                .bottom-item {
                    line-height: 25px;
                    border: 1px solid #eee;
                    border-top: none;
                    border-left: none;
                    font-size: 18px;
                    color: #fd3f31;
                    width: 20%;
                    height: 366px;
                    padding: 20px;
                    padding-bottom: 0;
                    cursor: pointer;

                    &:hover {
                        border: 1px solid #fd3f31;
                    }

                    img {
                        width: 198px;
                        height: 198px;
                    }

                    .goods-title {
                        margin-top: 10px;
                        font-size: 14px;
                        color: #9b9b9b;
                        line-height: 20px;
                        min-height: 40px;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        overflow: hidden;
                        margin-bottom: 5px;
                    }

                    .price-box {
                        cursor: pointer;
                        margin-bottom: 5px;

                        .pass {
                            margin-left: 8px;
                            vertical-align: baseline;
                            text-decoration: line-through;
                            line-height: 20px;
                            font-size: 14px;
                            color: #9b9b9b;
                        }
                    }

                    .shopInfo {
                        font-size: 12px;
                        color: #9b9b9b;
                        line-height: 17px;

                        .iconfont {
                            color: #fd3f31;
                        }
                        .shopcart{
                            float: right;
                        }
                    }

                    .item-footer {
                        margin-top: 4px;
                        border-top: 1px solid #eee;
                        color: #9b9b9b;
                        font-size: 12px;
                        background: #fff;
                        padding-left: 12px;
                        text-align: end;
                        padding-top: 5px;


                    }
                }

            }
        }
    }

    .main-footer {
        width: 1200px;
        // border: 1px solid red;
        margin: 0 auto;
        margin-top: 25px;
        padding: 30px 10px;

        .footer-item {
            color: #333;
            opacity: 0.5;
            margin-bottom: 10px;

            span {
                margin-right: 30px;
            }

            .item-link {

                cursor: pointer;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        .footer-item-2 {

            display: flex;
            flex-wrap: wrap;

            .item-link {
                margin-right: 30px;
                position: relative;
                white-space: nowrap;
                margin-bottom: 10px;
            }

            .item-link::after {
                content: "";
                height: 80%;
                border-left: 1px solid #9b9b9b;
                top: 15%;
                bottom: 0;
                right: -15px;
                position: absolute;
            }
        }

    }
}